import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';
import { Step, Row, Col, Button, Message, Form, FormGroup, Label, FormControl, Modal } from 'tinper-bee';
import BusinessContact from './BusinessContact.jsx';
import CommonModal from './../../components/CommonModal/index.jsx'
import App from 'layout/App.js'
import './index.less';
import { vendorsDanger as danger, vendorsSuccess as success } from 'utils/config.js';
import { searchWorkType, addWorkType, deleteWorkType, editWorkType } from './worktype.config.js'
import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import 'nprogress/nprogress.css';
import NProgress from 'nprogress';

export default class WorkType extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isAdd: true,
      text: "",
      deleteId: 0,
      showDelete: false,
      showDeleteModal: false
    }
  }
  componentDidMount() {
    NProgress.start();
    setTimeout(() => { NProgress.done() }, 1000);
    window.addEventListener('scroll', this.handlerScroll)
    this.init();
  }
  init = () => {
    let _me = this;
    searchWorkType({ 'isAjax': 1, 'isVisa': 1, 'ieStamp': new Date().getTime() })
      .then(function (response) {
        if (response.data.resultCode != 'busi_ex') {
          let data = response.data.result;
          if (!data.length) {
          } else {
            _me.setState({
              items: data
            });
          }
        } else {
          danger({ 'text': response.data.exMsg });
        }
      });
  }
  add = (obj, success, faile) => {
    let _me = this;
    if (obj.text.trim().length === 0) {
      danger({ 'text': '请输入具体内容！' });
      return;
    } else {
      if (obj.text.length > 50) {
        danger({ 'text': '请限制在50个字符之内！' });
        return;
      }
    }
    addWorkType({ 'sname': obj.text.trim(), 'isVisa': 1, 'isAjax': 1 })
      .then(function (res) {
        let data = res.data;
        if (res.data.resultCode != 'busi_ex') {
          let data = res.data.result;
          _me.setState({
            items: [..._me.state.items, data]
          });
          success && success();
        } else {
          danger({ 'text': res.data.exMsg });
          faile && faile()
        };
      })
  }
  handlerAdd = (e) => {
    this.setState({
      isAdd: true
    });
  }
  handlerText = (e) => {
  }
  handlerSave = (obj, data) => {
    let _me = this;
    _me.state.items.forEach(function (item, index) {
      if (item.sname === obj.default) {
        _me.state.items.splice(index, 1, data)
      }
    })
    _me.setState({
      items: _me.state.items
    });
  }
  handlerInputClick = (e) => {
  }
  handlerAddText = (e) => {
    this.setState({
      text: e.target.value
    });
  }
  handlerAddSave = (obj, success, faile) => {
    this.add(obj, success, faile);
  }
  handlerAddCancel = (e) => {
    this.setState({
      isAdd: false,
      text: ""
    });
  }
  handlerDelete = (obj) => {
    this.setState({
      showDeleteModal: true,
      deleteId: obj.id,
      changeFlag: obj.changeFlag
    });
  }
  handlerDeleteClose = (e) => {
    this.setState({
      showDeleteModal: false
    });
  }
  handlerDeleteConfirm = (e) => {
    let _me = this;
    let param = {
      'pkAltervisacategory': this.state.deleteId,
      'changeFlag': this.state.changeFlag,
      'isAjax': 1
    };
    deleteWorkType(param)
      .then(function (res) {
        if (res.data.resultCode != 'busi_ex') {
          let data = res.data.result;
          _me.state.items.forEach(function (item, index) {
            if (item.pkAltervisacategory == _me.state.deleteId) {
              _me.state.items.splice(index, 1)
            }
          });
          if (_me.state.items.length == 0) {
            _me.setState({
              isAdd: true,
              items: _me.state.items,
              showDeleteModal: false
            });
          } else {
            _me.setState({
              items: _me.state.items,
              showDeleteModal: false
            });
          }
          success({ 'text': '成功删除！' })
        } else {
          danger({ 'text': res.data.exMsg });
          _me.setState({
            showDeleteModal: false
          });
        }
      })
  }
  handlerKeyDown = (e, success, faile) => {
    if (e.keyCode == '13') {
      this.add({ 'text': this.state.text }, success, faile);
    }
  }
  handlerScroll = (e) => {
    if (e.target.scrollingElement.scrollTop >= 10) {
      this.refs.fixedTop.className = 'header header--fixed-top';
      this.refs.contenBox.className = 'content content--margin-top';
    } else {
      this.refs.fixedTop.className = 'header';
      this.refs.contenBox.className = 'content';
    }
  }
  render() {
    return (
      <App onscroll={this.handlerScroll}>
        <div className="block__type">
          <CommonModal show={this.state.showDeleteModal}
            cancel={this.handlerDeleteClose}
            confirm={this.handlerDeleteConfirm}
            content={''}
            backdrop={true}
          >
          </CommonModal>
          <div className="header" ref="fixedTop">签证类别</div>
          <div className="content" ref="contenBox">
            <div>
              <ReactCSSTransitionGroup
                className="animateExample"
                transitionEnterTimeout={300}
                transitionLeaveTimeout={200}
                transitionName="example">
                {
                  this.state.items.map((item) => {
                    return <BusinessContact
                      action={"view"}
                      onSave={this.handlerSave}
                      onChange={this.handlerText}
                      onDelete={this.handlerDelete}
                      defaultValue={item.sname}
                      changeFlag={item.changeFlag}
                      key={item.pkAltervisacategory}
                      id={item.pkAltervisacategory}
                      pk_group={item.pkTenant} />
                  })
                }
              </ReactCSSTransitionGroup>
            </div>
            <div className="content__opeate">
              {
                this.state.isAdd && <BusinessContact
                  action={"add"}
                  onSave={this.handlerAddSave}
                  onCancel={this.handlerAddCancel}
                  onKeyDown={this.handlerKeyDown}
                  defaultValue={''}
                  id={0}
                  onChange={this.handlerAddText}
                />
              }
              <div onClick={this.handlerAdd} className="opeate__btn">+</div>
            </div>
          </div>
        </div>
      </App>)
  }
}

WorkType.contextTypes = {
  router: PropTypes.object
}
